import { PageContainer } from '@ant-design/pro-components';
import {useEffect, useState} from 'react';
import {Avatar, Button, List, message, Skeleton} from 'antd';
import {listInterfaceInfoByPageUsingGET} from "@/services/api-open-plat-backend/interfaceInfoController";

const Index: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [data, setList] = useState<API.InterfaceInfo[]>([]);
  const [total, setTotal] = useState<number>();

  const loadData = async (current=1, pageSize= 10) => {
    setLoading(true);
    try {
      const res = await listInterfaceInfoByPageUsingGET({
        current, pageSize
      });
      setList(res?.data?.records ?? []);
      setTotal(res?.data?.total ?? 0);
    } catch (error: any) {
      message.error('请求失败.' + error.message);
    }
    setLoading(false);
  }

  useEffect(()=>{
    loadData();
  }, []);

  return (
    <PageContainer title="接口列表">
      <List
        className="my-list"
        loading={loading}
        itemLayout="horizontal"
        dataSource={data}
        renderItem={(item) => {
          const apiLink = `/interface_info/${item.id}`
          return(
            <List.Item actions={[<a key={item.id} href={apiLink} >查看</a>, ]} >
              <List.Item.Meta
                title={<a href= {apiLink}>{item.name}</a>}
                description={item.description}/>
            </List.Item>
          );
        }}
        pagination={{
          showTotal(total: number) {
            return '总数' + total
          },
          pageSize: 10,
          total,
          onChange(page, pageSize) {
            loadData(page, pageSize)
          }
      }}
      />
    </PageContainer>
  );
};

export default Index;
